<template>
  <div class="main">
    <div class="user">
  		<div class="user_header">
			<a href="javascript:window.history.back(-1)"></a>
			<p>会员中心</p>
  		</div>
  		<div class="userinfo">
  			<ul>
  				<li class="headImg">
  					<a href="javascript:;"><img src="../assets/user.jpg" /></a>
  				</li>
  				<li class="name">
  					<p class="title_1">
  						<span class="username">{{ userinfo.name }}</span>
  						<a href="usertype">{{ userinfo.usertype }}</a>
  					</p>
  					<p class="title_2">
  						<span>余额: ￥{{ userinfo.balance }}</span>
  						<span>优惠券: {{ userinfo.coupon }}</span>
  					</p>
  				</li>
  				<li class="wallet">
  					<a href="">
  						<img src="../assets/wallet.png" />
  						<span>我的钱包</span>
  					</a>
  				</li>
  			</ul>
  		</div>
  		<div class="user_news">
  			<a href="javascript:;" class="jf">
  				签到送积分 <span>(+)</span>
  			</a>
  			<a href="" class="msg">
  				我的消息
  			</a>
  		</div>
  		<div class="order">
  			<a href="" class="my">
  				<span class="left">我的订单</span>
  				<span class="right">查看所有</span>
  			</a>
  			<ul class="order_btn">
  				<li>
  					<a href="" class="btn">未支付</a>
  				</li>
  				<li>
  					<a href="" class="btn2">待发货</a>
  				</li>
  				<li>
  					<a href="" class="btn3">待收货</a>
  				</li>
  				<li>
  					<a href="" class="btn4">待评价</a>
  				</li>
  			</ul>
  		</div>
  		<div class="menu_list">
  			<ul>
  				<li>
  					<a href="" class="list1">我的收藏</a>
  				</li>
  				<li>
  					<a href="" class="list2">活动&优惠</a>
  				</li>
  				<li>
  					<a href="" class="list3">买家问答</a>
  				</li>
  				<li>
  					<a href="" class="list4">收货地址</a>
  				</li>
  				<li>
  					<a href="" class="list5">账户设置</a>
  				</li>
  			</ul>
  		</div>
  		<div class="user_foot">
  			<a href="/">首页</a>
  			<span> | </span>
  			<a href="/user_logout">登出</a>
  			<span> | </span>
  			<a href="#Top">顶部</a>
  		</div>
    </div>
  </div>
</template>

<script>
  export default {
	data (){
		return {
			userinfo: {
				name: 'admin@qq.com',
				usertype: '普通会员',
				balance: '0.00',
				coupon: '0'
			}
        }
	}
  }
</script>
<style>
	.header,.footer,.toolbar{display:none;}
	.user{
		overflow:hidden; background:#f7f7f7;
	}
	.user_header{
		width:100%; background:#eb6100; height:.45rem; text-align:center; overflow:hidden;
	}
	.user_header p{
		font-size:.18rem; color:#fff; line-height:.45rem; width:2.9rem;
	}
	.user_header a{
		float:left; width:.3rem; background:url('../assets/return.png') center center no-repeat; display:block; height:.45rem; background-size:.17rem auto;;
	}
	.userinfo{
		padding:3% 0 2% 3%; overflow:hidden; background:url(../assets/banner.jpg) center center no-repeat #eb6100;
	}
	.userinfo li{
		float:left;
	}
	.userinfo .headImg{
		width:20%; margin-top:1%; height:.64rem;
	}
	.userinfo .headImg img{
		width:100%; border-radius:50%;
	}
	.userinfo .name{
		padding:1% 0 0 3%; color:#fff; width:50%;
	}
	.userinfo .name .title_1{
		padding-bottom:2%; overflow:hidden;
	}
	.userinfo .name .title_1 span{
		font-size:.16rem; line-height:.24rem;
	}
	.userinfo .name .title_1 a{
		display:block;width:.56rem; height:.22rem; line-height:.22rem; text-align:center; border:.01rem solid #fff;-webkit-boder-radius:.05rem; -o-border-radius:.05rem; border-radius:.05rem; color:#fff; margin-left:3%; overflow:hidden;
	}
	.userinfo .name span{
		color:#fff; display:inline-block; margin:0 .05rem 0 0; line-height:.2rem;
	}
	.userinfo .wallet{
		float:right; margin:2% 0 0 0;
	}
	.userinfo .wallet img{
		width:.45rem;
	}
	.userinfo .wallet span{
		display:block; color:#fff; margin-right:.2rem;
	}
	.user_news{
		border-bottom:0.01rem solid #e1e1e1; background:#fff; overflow:hidden; border-top:0.01rem solid #e1e1e1; margin-bottom:.1rem;
	}
	.user_news a{
		font-size:.14rem; display:inline-block; width:49%; text-align:center; height:.55rem; line-height:.55rem;
	}
	.user_news a span{
		color:#eb6100;
	}
	.user_news .jf{
		border-right:#E1E1E1 .01rem solid; background:url(../assets/usercenter_1.jpg) .18rem center no-repeat; background-size:12%; text-indent:.25rem;
	}
	.user_news .msg{
		background:url(../assets/usercenter_2.jpg) .25rem center no-repeat; background-size:12%;
	}
	.order{
		background:#fff; border-top:0.01rem #e1e1e1 solid;border-bottom:0.01rem #e1e1e1 solid; margin:0 0 .1rem; overflow:hidden;
	}
	.order .my{
		display:block; padding:0 0.1rem; height:.4rem; line-height:.4rem; font-size:.14rem; color:#535353;
	}
	.order .my span:nth-of-type(2){
		float:right; background:url(../assets/next.jpg) right center no-repeat; padding:0 .15rem 0 0; background-size:10%;
	}
	.order .order_btn{
		border-top:#e1e1e1 0.01rem solid; overflow:hidden; padding:.12rem 0;
	}
	.order .order_btn li{
		float:left; width:25%; text-align:center;
	}
	.order .order_btn li a{
		display:block; width:100%; border-right:0.01rem #e1e1e1 solid; padding-top:.35rem;
	}
	.order .order_btn li .btn{
		background:url(../assets/usercenter_3.jpg) top center no-repeat; background-size:43%;
	}
	.order .order_btn li .btn2{
		background:url(../assets/usercenter_4.jpg) top center no-repeat; background-size:43%;
	}
	.order .order_btn li .btn3{
		background:url(../assets/usercenter_5.jpg) top center no-repeat; background-size:43%;
	}
	.order .order_btn li .btn4{
		background:url(../assets/usercenter_6.jpg) top center no-repeat; background-size:43%;
	}
	.menu_list{
		border-top:#e1e1e1 0.01rem solid; background:#fff; margin:0 0 0.1rem; overflow:hidden;
	}
	.menu_list li{
		padding:0 .12rem; height:.55rem; line-height:.55rem; border-bottom:#e1e1e1 0.01rem solid; background:url(../assets/next.jpg) 96% center no-repeat; background-size:2%;
	}
	.menu_list li a{
		color:#4d4c4c; font-size:.14rem; display:block; width:100%; line-height:.55rem; padding-left:.45rem; 
	}
	.menu_list li .list1{
		background:url(../assets/usercenter_7.jpg) .12rem center no-repeat;background-size:5%;
	}
	.menu_list li .list2{
		background:url(../assets/usercenter_8.jpg) .12rem center no-repeat;background-size:5%;
	}
	.menu_list li .list3{
		background:url(../assets/usercenter_9.jpg) .12rem center no-repeat;background-size:5%;
	}
	.menu_list li .list4{
		background:url(../assets/usercenter_10.jpg) .12rem center no-repeat;background-size:5%;
	}
	.menu_list li .list5{
		background:url(../assets/usercenter_11.jpg) .12rem center no-repeat;background-size:5%;
	}
	.user_foot{
		border-top:#e1e1e1 0.01rem solid; background:#fff; overflow:hidden; text-align:center; padding:0.08rem 0; line-height:.4rem;
	}
	.user_foot a{
		color:#a5a5a5;
	}
	.user_foot span{
		color:#a5a5a5; margin:0 .03rem;
	}
</style>
